<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" type="image/x-icon" href="res/image/logo.png" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>离散数学虚拟仿真实验</title>
</head>
<script type="text/javascript"></script>
<script src="js/jQuery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/echarts.js"></script>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/dualityRelation.css"/>
<link rel="stylesheet" href="css/iconfont.css"/>
<link rel="dns-prefetch" href="//cdn.mathjax.org" />
<script type="text/javascript" src="http://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<body>
<div class="mainView">
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="./index.html" style="font-size: 1.2rem;">二元关系仿真实验</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExample04">
            <ul class="navbar-nav mr-auto" style="width: 100%;justify-content: flex-end;">
                <li class="nav-item">
                    <a class="nav-link" href="./index.html">首页</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="./dualityRelation.html">表示方法</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./dualityJudge.html">性质判定</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./lexicalClosure.html" tabindex="-1" aria-disabled="true">闭包运算</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./equivalentRelation.html">等价关系</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./compatibleRelation.html">相容关系</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./partialOrder.html">偏序关系</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="modal" data-target="#myModal">知识点</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="contentContainer">
        <div class="divLeft col-sm-12 col-md-5 col-lg-5 shadow-lg">
            <p style="text-align: left;font-weight:bold;margin:20px;font-size:20pt;">关系图</p>
            <div class="echartsDiv" id="echartsDiv"></div>
        </div>
        <div class="divRight col-sm-12 col-md-5 col-lg-6" id="app">
            <div class="rightHead shadow-lg">
                <div class="form-group col-sm-12 col-md-12 col-lg-12 d-flex justify-content-evenly" style="margin:0px;padding:10px;">  
                    <label  class="inputLabel" for="exampleInputName2" data-toggle="tooltip" title="请按格式输入" style="font-weight:bold;">二元关系:</label>
                    <input class="form-control inputSet" type="text" v-model="relations" data-toggle="tooltip" title="例:{(1,1),(2,2),(3,3),(4,4),(1,2),(1,4),(2,1),(3,2),(3,4)}" value="{(1,1),(2,2),(3,3),(4,4),(1,2),(1,4),(2,1),(3,2),(3,4)}">
                </div>
                <div class="form-group col-sm-12 col-md-12 col-lg-10 d-flex justify-content-evenly" style="margin:0px;padding:10px;">  
                    <label  class="inputLabel" for="exampleInputName2" data-toggle="tooltip" title="请按格式输入" style="font-weight:bold;">集 合:</label>
                    <input class="form-control inputSet" type="text" v-model="sets" data-toggle="tooltip" title="例:{1,2,3,4}" value="{1,2,3,4}">
                </div>
                <input  @click="relationShow" type="button" class="col-sm-6 col-md-6 col-lg-2 btn btn-primary btnShow" style="height:50px;margin-top:10px;"   id="submitBtn"   value="显示">
                </input>
            </div>
            <div class="rightBody shadow-lg">
                <p style="text-align: left;font-weight:bold;margin:20px;font-size:20pt;">关系矩阵</p>
                <p id="matrix" style="text-align: center;font-size:20pt;">{{matrixs}}</p>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="doc/幻灯片14.PNG" alt="" style="width:100%;">
                <img src="doc/幻灯片15.PNG" alt="" style="width:100%;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width:300px;margin-top:40vh;">
        <div class="modal-content">
            <div class="modal-body">
                <p style="text-align: center; margin-bottom: 0px;">{{message}}</p>
            </div>
            <div class="modal-footer" style="padding: 0px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script src="js/vue.js"></script>
<script type="module" src="js/dualityRelation.js"></script>
<script type="text/x-mathjax-config">
    if(MathJax){
          MathJax.Hub.Config({
            jax: ["input/TeX","output/HTML-CSS", "output/PreviewHTML"],  //输出格式配置：latex 解析为 DOM结构
            tex2jax: {
              inlineMath: [['$','$']],
              displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
            },
            "HTML-CSS": {
              showMathMenu: false,            // 隐藏右键菜单展示
              linebreaks: {
                automatic: true,  //超长公式换行处理（默认是false不换行）
                width: "80%"      //设置换行的点，默认是遇到等号=换行
              }
            },
          });
        }
</script>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
</body>
</html>